<template>
  <div class="attach-viewer-audio">
    <div id="vs" ref="vs"></div>
  </div>
</template>
<script>
import Player from "xgplayer";
import Music from "xgplayer-music";
import MusicIcon from "@/assets/icons/music.png";

export default {
  name: "AttachViewerAudio",
  props: ["audioUrl", "fileName", "seekTime"],
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.player = new Music({
        el: this.$refs.vs,
        url: this.audioUrl,
        mediaType: "audio",
        url: [{ src: this.audioUrl, name: this.fileName, poster: MusicIcon }],
        volume: 0.8,
        height: 50,
        width: 660,
      });
      this.player.on("play", () => {
        this.$emit("onAudioPlay");
      });
    });
  },
  methods: {
    getMediaCurrentTime() {
      return Math.floor(this.player.currentTime);
    },
  },
  watch: {
    videoUrl(n, o) {
      console.log(n, o);
    },
  },
};
</script>
<style scoped>
#vs {
  width: 300px;
  height: 200px;
}
</style>
